<template>
  <div class="m-2 bg-white w-96">
    <div class="border-b border-gray-200 text-center text-lg font-semibold">
      <ul class="flex flex-wrap justify-center space-x-1">
        <li class="cursor-pointer" @click="renderTable(0)">
          <a :class="activeIndex == 0 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4">热度榜</a>
        </li>
        <li class="cursor-pointer" @click="renderTable(1)">
          <a :class="activeIndex == 1 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4">飙升榜</a>
        </li>
        <li class="cursor-pointer" @click="renderTable(2)">
          <a :class="activeIndex == 2 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4">可转债</a>
        </li>
        <li class="cursor-pointer" @click="renderTable(3)">
          <a :class="activeIndex == 3 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4">ETF</a>
        </li>
      </ul>
      <div class="m-4 text-right" v-if="activeIndex < 2">
        <span class="cursor-pointer" @click="changeType('hour')" :class="activeType == 'hour' ? 'font-semibold text-blue-500 ' : 'text-sm'">1小时</span>
        <span class="mx-2">|</span>
        <span class="cursor-pointer" @click="changeType('day')" :class="activeType == 'day' ? 'font-semibold text-blue-500 ' : 'text-sm'">24小时</span>
      </div>
    </div>

    <table class="w-full text-left">
      <thead class="border-b text-lg">
        <tr>
          <th scope="col" class="px-2 py-2">NO.</th>
          <th scope="col" class="px-2 py-2">股票</th>
          <th scope="col" class="px-2 py-2 text-right">涨幅</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(item, i) in list" :key="item.secu_code">
          <tr class="border-t">
            <td class="px-2 py-2 font-semibold">
              <div class="h-6 w-6 text-center text-lg">
                <div v-if="i == 0" class="bg-red-500 text-white">1</div>
                <div v-else-if="i == 1" class="bg-orange-300 text-white">2</div>
                <div v-else-if="i == 2" class="bg-yellow-300 text-white">3</div>
                <div v-else>{{ i + 1 }}</div>
              </div>
              <div class="mt-2 flex items-center text-sm" v-if="item.hot_rank_chg" :class="item.hot_rank_chg > 0 ? 'text-red-500' : 'text-green-600'">
                <svg class="h-3 w-3" v-if="item.hot_rank_chg < 0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1v12m0 0 4-4m-4 4L1 9" />
                </svg>
                <svg class="h-3 w-3" v-if="item.hot_rank_chg > 0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13V1m0 0L1 5m4-4 4 4" />
                </svg>
                {{ item.hot_rank_chg > 0 ? '+' : '' }}{{ item.hot_rank_chg }}
              </div>
            </td>
            <td class="px-2 py-2">
              <Stock :symbol="item.code" type="tonghua" placement="left" :name="item.name"></Stock>
            </td>
            <td class="px-2 py-2 text-right">
              <ChangePercent :percent="item.rise_and_fall / 100"></ChangePercent>
            </td>
          </tr>
          <tr v-if="item.tag">
            <td colspan="4" class="px-2 pb-2">
              <div class="flex justify-between truncate space-x-2">
                <div class="whitespace-nowrap rounded bg-red-500 px-2 py-0.5 text-sm text-white" v-if="item.tag.popularity_tag">
                  {{ item.tag.popularity_tag }}
                </div>
                <template v-for="(tag, i) in item.tag.concept_tag" :key="i">
                  <div class="whitespace-nowrap rounded bg-gray-200 px-2 py-0.5 text-sm">
                    {{ tag }}
                  </div>
                </template>
              </div>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import axios from 'axios';
import { ref } from 'vue';
import Utils from '../utils/index';

const list = ref([]);
const url_list = [
  'https://dq.10jqka.com.cn/fuyao/hot_list_data/out/hot_list/v1/stock?stock_type=a&list_type=normal&type=',
  'https://dq.10jqka.com.cn/fuyao/hot_list_data/out/hot_list/v1/stock?stock_type=a&list_type=skyrocket&type=',
  'https://dq.10jqka.com.cn/fuyao/hot_list_data/out/hot_list/v1/bond',
  'https://dq.10jqka.com.cn/fuyao/hot_list_data/out/hot_list/v1/etf',
];

const activeType = ref('hour');
const activeIndex = ref(0);

function changeType(type) {
  if (type != activeType.value) {
    activeType.value = type;
    list.value = [];
    fetchData();
  }
}
function fetchData() {
  let url = url_list[activeIndex.value];
  if (activeIndex.value < 2) {
    url += activeType.value;
  }
  // console.log(url)
  axios.get(url).then(function (res) {
    let result = [];
    if (activeIndex.value < 2) {
      result = res.data.data.stock_list;
    } else if (activeIndex.value == 2) {
      result = res.data.data;
    } else {
      result = res.data.data.list;
    }

    list.value = result.slice(0, 30);
  });
}

function renderTable(index) {
  if (index != activeIndex.value) {
    activeIndex.value = index;
    list.value = [];
    fetchData();
  }
}
function detail(item) {
  if (activeIndex.value < 2) {
    let url = 'https://ms.10jqka.com.cn/thsHotDetail/?name=' + item.name + '&code=' + item.code + '&marketCode=' + item.market;
    window.open(url);
  }
}

defineExpose({
  fetchData,
});
</script>
